<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>animation_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div{position:absolute;top:50%;left:50%;overflow:hidden;width:300px;height:150px;margin:-75px 0 0 -150px;border:3px solid #eee;background:#e0e0e0;}
span{display:block;height:50px;font:bold 14px/50px Georgia;}
.a1{
   transform:translate(60px);
    animation:animations 1s ease-out forwards;
}

@keyframes animations{
    0%{transform:translate(0);opacity:0;}
    50%{transform:translate(30px,30px);opacity:1;}
    70%{transform:translate(60px,60px);opacity:1;}
    100%{transform:translate(60px,90px);opacity:0;}
}
.a3{
    opacity: 0;
    transform:translate(100px);
    animation:animations3 2s ease-out 2s forwards;
}

@keyframes animations3{
    0%{transform:translate(160px);opacity:0;}
    50%{transform:translate(130px);opacity:1;}
    70%{transform:translate(125px);opacity:1;}
    100%{transform:translate(100px);opacity:0;}
}
body{
	background: #081621;
}
</style>
</head>
<body>
<div>
    <span class="a1">CSS3 Animations</span>
   
    <span class="a3">CSS3 Animations</span>
    <img src="img/矢量智能对象-拷贝-2_96.png"/>
</div>
</body>
</html>
